<template>
  <div class="user-info">
    <van-cell-group style="width: 100%;">
      <van-cell title="头像" is-link center>
        <template #default>
          <van-uploader :after-read="updateUserImg">
            <!-- :src="userInfo.avatar" -->
            <van-image class="icon" :src="userInfo.avatar.indexOf('http')!=-1?`${userInfo.avatar}`:`${resourceURL}${userInfo.avatar}`" fit="cover" round />
          </van-uploader>
        </template>
      </van-cell>

      <van-field label="名称" v-model="userInfo.nick_name" placeholder="请输入名称" input-align="right" />
      <van-field label="真实姓名" v-model="userInfo.real_name" placeholder="请输入真实姓名" input-align="right" />
      <van-field label="手机号" v-model="userInfo.phone" placeholder="请输入手机号码" input-align="right" />
    </van-cell-group>

    <div class="save">
      <van-button block round class="btn" @click="cancelLogin">退出登录</van-button>
    </div>
  </div>
</template>
<script>
import { Toast } from "vant";
export default {
  data () {
    return {
      userInfo: this.$store.state.userInfo,
      newUserInfo: {},
      changeName: true,
      changeNick: true,
      changephone: true,
    };
  },
  beforeDestroy () {
    this.$axios
      .post(this.$api.UpdateUserInfo, {
        nick_name: this.userInfo.nick_name,
        real_name: this.userInfo.real_name,
        phone: this.userInfo.phone
      })
      .then((res) => {
        if (res.data.code == 1) {
          //res
        }
      });
  },
  methods: {
    //修改个人资料

    cancelLogin () {
      this.$store.commit('settoken', '')
      window.location.reload();
    },
    //请求个人信息数据
    getUserInfo () {

      this.$axios
        .get(this.$api.GetUserAllInfo)
        .then((res) => {

          if (res.data.data.data) {
            this.$store.commit('setUserInfo', res.data.data.data)
            this.userInfo = this.$store.state.userInfo
          }


        });
    },
    //上传头像

    updateUserImg (file) {
      let formData = new FormData();
      formData.append("image", file.file);
      this.$axios.post(this.$api.UpdateAvatar, formData).then((res) => {
        if (res.data.code == 1) {
          Toast.success('上传成功');

          this.getUserInfo()
        }
      });
    },
  },
  created () {

  },
};
</script>
<style scoped lang="less">
.btn {
  background: #ff7733 !important;
  border: 1px solid #ff7733 !important;
  color: white;
}
.user-info {
  position: relative;
  min-height: 100vh;
  background-color: #fff;
  padding-bottom: 100px;
  /deep/.van-field__label {
    color: #000;
  }
  .save {
    position: fixed;
    width: 90%;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
  }
}
.icon {
  width: 36px;
  height: 36px;
}
</style>